<template>
<div class="workBench">
    <!--上半部分蓝色背景 + 搜索框-->
    <div class="upperPart">
        <div class="searchInp">
            <el-input placeholder="请输入报案号" prefix-icon="el-icon-search" style="border-radius='unse'" v-model="searchConditons.policyNo"></el-input>
            <el-button type="primary" @click="queryCase">案件查询</el-button>
            <el-button type="warning">流程查询</el-button>
        </div>
    </div>

    <!--下半部分灰色背景 -->
    <div class="bottomPart"></div>
    <!--中间悬浮页面-->
    <div class="hoverPage">
        <div class="hoverPage_top">
            <!--流程小图标-->
            <el-row :gutter="20" class="claimProcess">
                <el-col :span="2.5" class="cx-shortcut-item">
                    <div class="cx-shortcut-icon">
                        <i class="iconfont icon-shouji"></i>
                    </div>
                    <div class="cx-shortcut-name">
                        <span>报案</span>
                        <span class="pl">5</span>
                    </div>
                </el-col>
                <el-col :span="2.5" class="cx-shortcut-item">
                    <div class="cx-shortcut-icon">
                        <i class="iconfont icon-ditu"></i>
                    </div>
                    <div class="cx-shortcut-name">
                        <span>调度</span>
                        <span class="pl">5</span>
                    </div>
                </el-col>
                <el-col :span="2.5" class="cx-shortcut-item">
                    <div class="cx-shortcut-icon">
                        <i class="iconfont icon-zizhuchakan"></i>
                    </div>
                    <div class="cx-shortcut-name">
                        <span>查勘</span>
                        <span class="pl">5</span>
                    </div>
                </el-col>
                <el-col :span="2.5" class="cx-shortcut-item">
                    <div class="cx-shortcut-icon">
                        <i class="iconfont icon-chuli"></i>
                    </div>
                    <div class="cx-shortcut-name">
                        <span>处理</span>
                        <span class="pl">5</span>
                    </div>
                </el-col>
                <el-col :span="2.5" class="cx-shortcut-item">
                    <div class="cx-shortcut-icon">
                        <i class="iconfont icon-jiean"></i>
                    </div>
                    <div class="cx-shortcut-name">
                        <span>结案</span>
                        <span class="pl">5</span>
                    </div>
                </el-col>
                <el-col :span="2.5" class="cx-shortcut-item">
                    <div class="cx-shortcut-icon">
                        <i class="iconfont icon-shenhe1"></i>
                    </div>
                    <div class="cx-shortcut-name">
                        <span>审核</span>
                        <span class="pl">5</span>
                    </div>
                </el-col>
                <el-col :span="2.5" class="cx-shortcut-item">
                    <div class="cx-shortcut-icon">
                        <i class="iconfont icon-lipei"></i>
                    </div>
                    <div class="cx-shortcut-name">
                        <span>核赔</span>
                        <span class="pl">5</span>
                    </div>
                </el-col>
                <el-col :span="2.5" class="cx-shortcut-item">
                    <div class="cx-shortcut-icon">
                        <i class="iconfont icon-qita"></i>
                    </div>
                    <div class="cx-shortcut-name">
                        <span>其他</span>
                        <span class="pl">5</span>
                    </div>
                </el-col>
                <el-col :span="2.5" class="cx-shortcut-item">
                    <div class="cx-shortcut-icon">
                        <i class="iconfont icon-schedule"></i>
                    </div>
                    <div class="cx-shortcut-name">
                        <span>待强制立案</span>
                        <span class="pl">5</span>
                    </div>
                </el-col>
            </el-row>
            <!--三大项处理状态Status-->
            <div class="handleStatus">
                <div class="processed">
                    <h4>已处理</h4>
                    <el-row>
                        <el-col :span="6">
                            <span>一天内</span>
                            <span class="pl">5</span>
                        </el-col>
                        <el-col :span="6">
                            <span>七天内</span>
                            <span class="pl">5</span>
                        </el-col>
                        <el-col :span="6">
                            <span>一个月内</span>
                            <span class="pl">5</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <span>三个月内</span>
                            <span class="pl">5</span>
                        </el-col>
                        <el-col :span="6">
                            <span>半年内</span>
                            <span class="pl">5</span>
                        </el-col>
                        <el-col :span="6">
                            <span>一年内</span>
                            <span class="pl">5</span>
                        </el-col>
                    </el-row>
                </div>
                <div class="processing">
                    <h4>正在处理</h4>
                    <el-row>
                        <el-col :span="6">
                            <span>报案</span>
                            <span class="pl">2</span>
                        </el-col>
                        <el-col :span="6">
                            <span>调度</span>
                            <span class="pl">6</span>
                        </el-col>
                        <el-col :span="6">
                            <span>查勘</span>
                            <span class="pl">0</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <span>处理</span>
                            <span class="pl">2</span>
                        </el-col>
                        <el-col :span="6">
                            <span>结案</span>
                            <span class="pl">6</span>
                        </el-col>
                        <el-col :span="6">
                            <span>核赔</span>
                            <span class="pl">0</span>
                        </el-col>
                    </el-row>
                </div>
                <div class="myCare">
                    <h4>我的关注</h4>
                    <el-row>
                        <el-col :span="6">
                            <span>处理</span>
                            <span class="pl">2</span>
                        </el-col>
                        <el-col :span="6">
                            <span>结案</span>
                            <span class="pl">6</span>
                        </el-col>
                        <el-col :span="6">
                            <span>核赔</span>
                            <span class="pl">0</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <span>处理</span>
                            <span class="pl">2</span>
                        </el-col>
                        <el-col :span="6">
                            <span>结案</span>
                            <span class="pl">6</span>
                        </el-col>
                        <el-col :span="6">
                            <span>核赔</span>
                            <span class="pl">0</span>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <!--未处理任务-->
        <div class="hoverPage_bottom_left borderSolid">
            <h4 class="leftHd">
                未处理任务
                <div class="changeIcon">
                    <i class="el-icon-menu font14 iconColor" :class="{ activeIconColor: listStyle === 'blockList' }" @click="changIcon('blockList')"></i>
                    <i class="el-icon-s-grid font14 iconColor" :class="{ activeIconColor: listStyle === 'tableList' }" @click="changIcon('tableList')"></i>
                </div>
            </h4>

            <div class="bottomLine"></div>
            <div class="blockList" v-show="listStyle === 'blockList'">
                <el-row>
                    <el-col :span="12" class="borderSolid">
                        <div class="hoverPage_bottom_left--pic">
                            <img class="caseTypeImg" src="../../../public/resources/images/normal.jpg" alt="" />
                        </div>
                        <div class="hoverPage_bottom_left--center">
                            <span class="fontColor pointer" @click="goToDet">V20200620001V20200620002</span>
                            <span>2018-04-02 行人交通事故</span>
                        </div>
                        <div class="hoverPage_bottom_left--right">
                            <i class="iconfont icon-hierarchy-vii" @click="goToProcess"></i>
                            <i class="iconfont icon-xinaixin"></i>
                            <span class="getTime">30分钟前</span>
                        </div>
                    </el-col>
                    <el-col :span="12" class="borderSolid">
                        <div class="hoverPage_bottom_left--pic">
                            <img class="caseTypeImg" src="../../../public/resources/images/normal.jpg" alt="" />
                        </div>
                        <div class="hoverPage_bottom_left--center">
                            <span class="fontColor pointer" @click="goToDet">V20200620001V20200620001</span>
                            <span>2018-04-02 行人交通事故</span>
                        </div>
                        <div class="hoverPage_bottom_left--right">
                            <i class="iconfont icon-hierarchy-vii"></i>
                            <i class="iconfont icon-xinaixin"></i>
                            <span class="getTime">30分钟前</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="borderSolid">
                        <div class="hoverPage_bottom_left--pic">
                            <img class="caseTypeImg" src="../../../public/resources/images/normal.jpg" alt="" />
                        </div>
                        <div class="hoverPage_bottom_left--center">
                            <span class="fontColor pointer" @click="goToDet">V20200620001V20200620001</span>
                            <span>2018-04-02 行人交通事故</span>
                        </div>
                        <div class="hoverPage_bottom_left--right">
                            <i class="iconfont icon-hierarchy-vii"></i>
                            <i class="iconfont icon-xinaixin"></i>
                            <span class="getTime">30分钟前</span>
                        </div>
                    </el-col>
                    <el-col :span="12" class="borderSolid">
                        <div class="hoverPage_bottom_left--pic">
                            <img class="caseTypeImg" src="../../../public/resources/images/simple.jpg" alt="" />
                        </div>
                        <div class="hoverPage_bottom_left--center">
                            <span class="fontColor pointer" @click="goToDet">V20200620001V20200620001</span>
                            <span>2018-04-02 行人交通事故</span>
                        </div>
                        <div class="hoverPage_bottom_left--right">
                            <i class="iconfont icon-hierarchy-vii"></i>
                            <i class="iconfont icon-xinaixin"></i>
                            <span class="getTime">30分钟前</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="borderSolid">
                        <div class="hoverPage_bottom_left--pic">
                            <img class="caseTypeImg" src="../../../public/resources/images/normal.jpg" alt="" />
                        </div>
                        <div class="hoverPage_bottom_left--center">
                            <span class="fontColor pointer" @click="goToDet">V20200620001V20200620001</span>
                            <span>2018-04-02 行人交通事故</span>
                        </div>
                        <div class="hoverPage_bottom_left--right">
                            <i class="iconfont icon-hierarchy-vii"></i>
                            <i class="iconfont icon-xinaixin"></i>
                            <span class="getTime">30分钟前</span>
                        </div>
                    </el-col>
                    <el-col :span="12" class="borderSolid">
                        <div class="hoverPage_bottom_left--pic">
                            <img class="caseTypeImg" src="../../../public/resources/images/normal.jpg" alt="" />
                        </div>
                        <div class="hoverPage_bottom_left--center">
                            <span class="fontColor pointer" @click="goToDet">V20200620001V20200620001</span>
                            <span>2018-04-02 行人交通事故</span>
                        </div>
                        <div class="hoverPage_bottom_left--right">
                            <i class="iconfont icon-hierarchy-vii"></i>
                            <i class="iconfont icon-xinaixin"></i>
                            <span class="getTime">30分钟前</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="tableList" v-show="listStyle === 'tableList'">
                <el-table :data="tableData" stripe style="width: 100%" @cell-click="handle">
                    <el-table-column prop="type" label="案件类型"><img class="caseTypeImg" src="../../../public/resources/images/normal.jpg" alt="" /></el-table-column>
                    <el-table-column prop="date" label="流入时间" width="100"></el-table-column>
                    <el-table-column prop="address" label="报案号" width="220"></el-table-column>
                    <el-table-column prop="peian" label="赔案名称" width="240"></el-table-column>
                    <el-table-column label="流程图"><i class="iconfont icon-hierarchy-vii"></i></el-table-column>
                    <el-table-column prop="myCare" label="关注"><i class="iconfont icon-xinaixin"></i></el-table-column>
                </el-table>
            </div>

            <el-link class="more fontColor" href="https://element.eleme.io" target="_blank">更多</el-link>
        </div>
        <!--我的提醒-->
        <div class="hoverPage_bottom_right borderSolid">
            <h4 class="leftHd">我的提醒</h4>
            <div class="bottomLine"></div>
            <!-- 列表信息-->
            <el-row class="bottomLine padding5">
                <el-col :span="24">
                    <div class="leftTime">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-new"></use>
                        </svg>
                        <span class="monthAndDay">04/09</span>
                        <span class="year">2018</span>
                    </div>
                    <div class="rightDet">
                        <p class="rightTxt">我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒</p>
                        <span class="getTime">30分钟前</span>
                        <i class="iconfont icon-lajitong1"></i>
                    </div>
                </el-col>
            </el-row>
            <el-row class="bottomLine padding5">
                <el-col :span="24">
                    <div class="leftTime">
                        <span class="monthAndDay">04/09</span>
                        <span class="year">2018</span>
                    </div>
                    <div class="rightDet">
                        <p class="rightTxt">我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒</p>
                        <span class="getTime">30分钟前</span>
                        <i class="iconfont icon-lajitong1"></i>
                    </div>
                </el-col>
            </el-row>
            <el-row class="bottomLine padding5">
                <el-col :span="24">
                    <div class="leftTime">
                        <span class="monthAndDay">04/09</span>
                        <span class="year">2018</span>
                    </div>
                    <div class="rightDet">
                        <p class="rightTxt">我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒我的提醒</p>
                        <span class="getTime">30分钟前</span>
                        <i class="iconfont icon-lajitong1"></i>
                    </div>
                </el-col>
            </el-row>

            <el-link class="more fontColor" href="https://element.eleme.io" target="_blank">更多</el-link>
        </div>
    </div>
</div>
</template>

<script>
import {
    mapState
} from "vuex";
import router from '@/router'
import variables from "@/styles/variables.scss";

export default {
    data() {
        return {
            searchConditons: {
                policyNo: "",
            },
            listStyle: "blockList",
            tableData: [{
                    type: "简易",
                    date: "2016-05-04",
                    address: "41100020183030000003",
                    peian: "河北有限公司20180412烧伤",
                    liuchengtu: "",
                    myCare: ""
                },
                {
                    type: "简易",
                    date: "2016-05-04",
                    address: "41100020183030000003",
                    peian: "河北有限公司20180412烧伤",
                    liuchengtu: "",
                    myCare: ""
                },

                {
                    type: "简易",
                    date: "2016-05-04",
                    address: "41100020183030000003",
                    peian: "河北有限公司20180412烧伤",
                    liuchengtu: "",
                    myCare: ""
                },
                {
                    type: "简易",
                    date: "2016-05-04",
                    address: "41100020183030000003",
                    peian: "河北有限公司20180412烧伤",
                    liuchengtu: "",
                    myCare: ""
                },
                {
                    type: "简易",
                    date: "2016-05-04",
                    address: "41100020183030000003",
                    peian: "河北有限公司20180412烧伤",
                    liuchengtu: "",
                    myCare: ""
                }
            ]
        };
    },

    methods: {
        queryCase() {
            this.$router.push({
                name: "query",
                query: this.searchConditons,
            })
        },
        changIcon(style) {
            this.listStyle = style;
        },
        handle(row, column, event, cell) {
            console.log(arguments);
            router.push('case')
        },
        goToDet() {
            router.push('case')
        },
        goToProcess() {
            router.push('process')
        }
    },
    computed: {
        ...mapState({
            sidebar: state => state.app.sidebar
        })
    }
};
</script>

<style lang="scss">
.fontColor {
    color: rgb(87, 155, 222);
}

.iconColor {
    color: #909399;
}

.activeIconColor {
    color: rgb(87, 155, 222) !important;
}

.borderSolid {
    border: 1px solid rgb(242, 242, 244);
}

.leftHd {
    text-align: left;
    border-left: 2px solid rgb(87, 155, 222);
    margin-left: 10px;
    padding-left: 10px;
}

.bottomLine {
    width: 100%;
    border-bottom: 1px solid rgb(242, 242, 244);
}

.padding5 {
    padding-bottom: 5px;
}

.font14 {
    font-size: 14px;
}

.colorRed {
    color: red;
}

.workBench {
    text-align: center;

    .upperPart {
        width: 102%;
        margin-left: -1%;
        height: 140px;
        text-align: center;
        background-color: #1d3a6a;

        .searchInp {
            width: 50%;
            display: inline-block;
            margin-top: 2%;

            .el-input {
                width: 60%;
            }

            .el-input__inner {
                border-radius: unset !important;
            }
        }

        .el-button {
            margin-left: -1px !important;
            margin-top: -1px !important;
            border-radius: unset !important;
        }
    }

    .hoverPage {
        width: 94%;
        font-size: 14px;
        position: absolute;
        top: 100px;
        left: 3%;

        .pl {
            padding-left: 10px;
            font-size: 16px;
            color: rgb(87, 155, 222);
        }

        .more {
            float: right;
            padding: 10px 20px;
        }

        .hoverPage_top {
            background: white;
            width: 100%;
            margin-bottom: 1%;
            padding-top: 5%;

            .el-row {
                margin-bottom: 10px;
            }

            .claimProcess {
                padding: 2%;
                padding-left: 10%;
                text-align: center;

                .cx-shortcut-item {
                    cursor: pointer;
                    position: relative;
                    margin: 0 15px;

                    .cx-shortcut-icon {
                        margin: 0 auto;
                        width: 48px;
                        height: 40px;
                        text-align: center;

                        i {
                            margin-top: 8px;
                            font-size: 25px;
                        }
                    }

                    .cx-shortcut-name {
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        font-size: 14px;
                    }
                }
            }

            .processed,
            .processing,
            .myCare {
                display: inline-block;
                width: 32%;
                padding-bottom: 2%;
                padding-left: 2%;
                border-top: 1px solid rgb(242, 242, 244);
                border-right: 1px solid rgb(242, 242, 244);
            }

            processing .el-row {
                padding-bottom: 20px;
            }
        }

        .hoverPage_bottom_left,
        .hoverPage_bottom_right {
            float: left;
            background: white;
        }

        .hoverPage_bottom_left {
            width: 76%;
            margin-right: 1%;

            .el-row {
                padding: 1%;
                margin: 1px;
            }

            .el-col-12 {
                width: 48%;
                margin-right: 2%;
            }

            .changeIcon {
                float: right;
                padding-right: 20px;
                cursor: pointer;

                i {
                    margin: 5px;
                }
            }

            .tableList {

                // margin-bottom: 25px;
                .caseTypeImg {
                    padding-left: 10px;
                    width: 30px;
                }

                .el-table .el-table__body-wrapper tbody tr td {
                    cursor: pointer;
                }

                .el-table .el-table__body-wrapper tbody tr td:nth-child(3) {
                    color: #409eff;
                }
            }

            .hoverPage_bottom_left--pic,
            .hoverPage_bottom_left--right,
            .hoverPage_bottom_left--center {
                float: left;
                padding-top: 5%;
                margin-left: 10px;
            }

            .hoverPage_bottom_left--center {
                padding: 3%;
            }

            .hoverPage_bottom_left--center span {
                display: block;
                text-align: left;
                padding: 2%;
            }

            .hoverPage_bottom_left--right {
                padding: 3%;
                float: right;

                i {
                    font-size: 20px;
                    padding: 10%;
                    color: #bdbdd0;
                }

                .getTime {
                    display: block;
                    padding-top: 10%;
                    color: #bdbdd0;
                }
            }
        }

        .hoverPage_bottom_right {
            width: 23%;

            .el-row {
                padding: 1%;
            }

            .el-col-24 {
                margin: 10px;
            }

            .leftTime {
                float: left;
                width: 30%;
                padding: 5%;
                background: rgb(242, 242, 244);
                position: relative;

                svg {
                    width: 30px;
                    height: 30px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .monthAndDay {
                    display: block;
                    font-size: 16px;
                    padding: 2%;
                }

                .year {
                    display: block;
                    font-size: 16px;
                    color: #909399;
                    padding: 2%;
                }
            }

            .rightDet {
                width: 65%;
                float: left;
                text-align: left;
                font-size: 13px;
                margin-top: -13px;
                padding: 0 10px;

                .rightTxt {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2; // 2行
                    word-break: break-all; // 换行
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                }

                .iconfont {
                    float: right;
                }
            }
        }
    }

    .bottomPart {
        background: rgb(242, 242, 244);
        width: 100%;
        height: 750px;
    }
}
</style>
